<template>
  <div>
    <div class="img-admin-contanier">
      <span style="margin: 0 30px 0 0">{{ }}</span>
      <Upload :img-url="user.img" style="width: 100px;border-radius: 50%; " @upload="uploade" />
    </div>
    <el-row style="padding: 20px 0 0 20px">
      <el-col :span="8" style="margin: 0 10px 0 0">
        <el-input v-model="user.name" placeholder="请输入内容">
          <template slot="prepend">博客名字</template>
        </el-input>
      </el-col>
    </el-row>
    <el-row style="padding: 20px 0 0 20px">
      <el-col :span="8" style="margin: 0 10px 0 0">
        <el-input v-model="user.descript" placeholder="请输入内容" maxlength="20">
          <template slot="prepend">个性签名</template>
        </el-input>
      </el-col>
    </el-row>
    <el-row style="padding: 20px 0 0 20px">
      <el-col :span="8" style="margin: 0 10px 0 0">
        <el-button type="success" @click="submit">提交修改</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Upload from '@/components/uploade'
import { baseUrl } from '@/routerConfig'
import { getAVatar, upAvatar } from '@/api/meun'
import { Message } from 'element-ui'
export default {
  components: {
    Upload
  },
  data() {
    return {
      user: {
        name: '',
        descript: '',
        img: '',
        _id: ''
      },
      baseUrl,
      ouser: {}
    }
  },
  async beforeCreate() {
    const result = await getAVatar()
    this.user = { ...result.data }
    this.ouser = { ...this.user }
  },
  methods: {
    uploade(e) {
      this.user.img = e
    },
    async submit() {
      let isUp = false
      for (const p in this.user) {
        if (this.user[p] !== this.ouser[p]) {
          isUp = true
          break
        }
      }
      if (isUp) {
        const { data } = await upAvatar(this.user)
        if (typeof data === 'string') {
          Message.error(data)
        } else {
          Message.success('修改成功')
        }
      } else {
        Message.success('无需提交')
      }
    }
  }
}
</script>
<style>
.img-admin-contanier {
  margin: 30px 0 0 30px;
  display: flex;
  align-items: center;
}
.img-admin-contanier div div img {
  border-radius: 50% !important;
}
</style>
